<template>
    <article>
        <header>按钮</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-button c="btn default medium distant">普通按钮</cv-button>
                <cv-button c="btn primary medium distant">主要按钮</cv-button>
                <cv-button c="btn success medium distant">成功按钮</cv-button>
                <cv-button c="btn warn medium distant">警告按钮</cv-button>
                <cv-button c="btn error medium distant">危险按钮</cv-button>
            </div>
        </section>
        <section>
            <header>大小</header>
            <div>
                <cv-button c="btn primary large distant">大按钮</cv-button>
                <cv-button c="btn primary medium distant">中按钮</cv-button>
                <cv-button c="btn primary small distant">小按钮</cv-button>
                <cv-button c="btn primary mini distant">迷你按钮</cv-button>
            </div>
        </section>
        <section>
            <header>图标</header>
            <div>
                <cv-button c="btn primary medium distant" icon="reset">重置</cv-button>
            </div>
        </section>
        <header>链接</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-button c="link default medium distant">普通链接</cv-button>
                <cv-button c="link primary medium distant">主要链接</cv-button>
                <cv-button c="link success medium distant">成功链接</cv-button>
                <cv-button c="link warn medium distant">警告链接</cv-button>
                <cv-button c="link error medium distant">危险链接</cv-button>
            </div>
        </section>
        <section>
            <header>大小</header>
            <div>
                <cv-button c="link primary large distant">大链接</cv-button>
                <cv-button c="link primary medium distant">中链接</cv-button>
                <cv-button c="link primary small distant">小链接</cv-button>
                <cv-button c="link primary mini distant">迷你链接</cv-button>
            </div>
        </section>
        <section>
            <header>下划线</header>
            <div>
                <cv-button c="link primary medium underline distant">下划线链接</cv-button>
            </div>
        </section>
        <section>
            <header>图标</header>
            <div>
                <cv-button c="link primary medium distant" icon="reset">重置</cv-button>
            </div>
        </section>
    </article>
</template>

<script>
    import "./icon/iconfont.css";
    
    export default {
        name: "ExampleButton"
    }
</script>

<style scoped>
</style>
